<template>
  <div>
    <el-row style="margin: 10px 0 10px 0" type="flex" justify="start">
      <el-col span="auto" style="margin-right: 5px">
        <el-avatar :src="replyUser.imgUrl" :size="45"></el-avatar>
      </el-col>
      <el-col>
        <el-row>
          <span style="font-weight: bold">{{replyUser.nickname}}</span>
          <span style="margin-left: 10px; color: #727272; font-size: 14px">回复了我的评论</span>
        </el-row>
        <el-row style="margin-top: 10px; margin-bottom: 10px">
          <span>{{comment.content}}</span>
        </el-row>
        <el-row class="box">
          <el-col span="auto">
            <span style="margin-right: 10px">{{comment.gmtCreate}}</span>
          </el-col>
          <el-col span="auto">
            <span class="detail-button" @click="forMoreDetail">查看详情</span>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-divider direction="horizontal"></el-divider>
  </div>
</template>

<script>
export default {
  name: "ReplyComment",
  props: {
    comment: Object
  },
  data() {
    return {
      replyUser: {}
    }
  },
  methods: {
    forMoreDetail() {
      this.$router.push({
        name: 'post',
        query: {
          id: this.comment.postId,
          from: 'all'
        }
      })
    }
  },
  created() {
    this.replyUser = this.comment.childCommentUser
  }
}
</script>

<style lang="scss" scoped>
.box {
  margin-top: 6px;
  font-size: 12px;
  color: #727272;
}

.detail-button {
  cursor: pointer;
  color: #409EFF;
}
</style>
